<template>
    <div class="scroll">
      <el-menu v-for="(item,index) in dataList" :key="index" v-if="dataList"
        router
        collapse-transition
        :collapse="isCollapse"
        @select="skip"
        background-color="rgb(50, 64, 87)"
        text-color="#fff"
        active-text-color="#347ffe"
        :default-active="defaultActive"
        class="el-menu-vertical-demo">
          <el-menu-item v-if="item.submenu==''" :index="'/'+item.access">
            <i :class="item.icon"></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
          <el-submenu :index="item.access" v-else>
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item v-for="(item2,index2) in item.submenu" :index="'/'+item2.access" :key="index2">{{item2.title}}</el-menu-item>
          </el-submenu>
        <!--<el-menu-item index="/homePage">-->
          <!--<i class="el-icon-s-grid"></i>-->
          <!--<span slot="title">首页</span>-->
        <!--</el-menu-item>-->
        <!--<el-menu-item index="/connectorDebug">-->
          <!--<i class="el-icon-menu"></i>-->
          <!--<span slot="title">在线接口测试</span>-->
        <!--</el-menu-item>-->
        <!--<el-submenu index="1">-->
          <!--<template slot="title">-->
            <!--<i class="el-icon-location"></i>-->
            <!--<span>导航一</span>-->
          <!--</template>-->
            <!--<el-menu-item index="/table">表格</el-menu-item>-->
            <!--<el-menu-item index="1-2">选项2</el-menu-item>-->
        <!--</el-submenu>-->
        <!--<el-submenu index="merchant">-->
          <!--<template slot="title">-->
            <!--<i class="el-icon-location"></i>-->
            <!--<span>商户管理</span>-->
          <!--</template>-->
          <!--<el-menu-item index="/merchantList">商户列表</el-menu-item>-->
          <!--<el-menu-item index="/merBusinessConfigList">商户业务配置</el-menu-item>-->
        <!--</el-submenu>-->
        <!--<el-submenu index="merchantCard">-->
          <!--<template slot="title">-->
            <!--<i class="el-icon-location"></i>-->
            <!--<span>卡管理</span>-->
          <!--</template>-->
          <!--<el-menu-item index="/applyCardList">办卡列表</el-menu-item>-->
          <!--<el-menu-item index="/cardEvalutionList">卡评测</el-menu-item>-->
        <!--</el-submenu>-->
        <!--<el-submenu index="merchantCard">-->
          <!--<template slot="title">-->
            <!--<i class="el-icon-location"></i>-->
            <!--<span>卡管理</span>-->
          <!--</template>-->
          <!--<el-menu-item index="/systemUser">办卡列表</el-menu-item>-->
          <!--<el-menu-item index="/userGroup">卡评测</el-menu-item>-->
        <!--</el-submenu>-->
      </el-menu>
    </div>
</template>

<script>
  import bus from '../../assets/js/busEvevt'
    export default {
        data() {
            return {
              defaultActive:this.$route.path,
              isCollapse:false,
              dataList:[],
            }
        },
      props:{
        list:Array,
        required:true,
      },
      mounted() {
        bus.$on('isCollapse',(msg) => {
          this.isCollapse = msg;
          let scroll_div = document.getElementsByClassName('scroll')[0];
          if(this.isCollapse){
            scroll_div.style.width = '65px'
          }else {
            scroll_div.style.width = '202px'
          }
        });
      },
      methods: {
          skip:function (path) {

          },
        },
      watch:{
        $route(to,from){
          this.defaultActive = to.path;
        },
        list(val) {
          this.dataList = val;
        }
      },
    }
</script>

<style scoped>
  .scroll{
    width: 202px;
    overflow-y: scroll;
    height: 100%;
    transition: width .38s;
    padding-bottom: 60px;
  }
  .scroll>>>.el-menu-item{
    background-color:rgb(50, 64, 87)!important;
  }
  .scroll>>>.el-menu-item:hover{
    background-color: rgba(30, 47, 76, 0.92) !important;
    cursor: pointer;
  }
  .scroll>>>.el-submenu__title:hover{
    background-color: rgba(30, 47, 76, 0.92) !important;
    cursor: pointer;
  }
  .scroll>>>.el-menu{
    border: none;
  }
  /*改变滚动条样式*/
  .scroll::-webkit-scrollbar{
    width: 1px;
    height: 1px;
    background-color: rgb(50, 64, 87);
  }
  .scroll::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 1px;
    background-color: rgb(50, 64, 87);
  }
</style>
